<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC</title>
        <style type="text/css">
            h3 { 
                text-align: center;
            }

           .container {
                width: 80vw;
                border: 2px solid red;
                margin: auto;
            }

            .first {
                height: 400px;
                background: #f4f4f4;
            }

            .left {
                float: left;
                width: 20%;
                height: 50%;
                background: #5e8bfe;
            }

            .right {
                overflow: auto;
                height: 80%;
                background: #fdaf41;
            }
        </style>
    </head>

    <body>
        <h3>用BFC实现自适用两列布局</h3>
        <div class="container first">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>